<template>
  <div class="container-fans">
    <el-card>
      <div slot="header">
        <my-bread>粉丝管理</my-bread>
      </div>
      <!-- 标签页组件 el-tabs -->
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="粉丝列表" name="list">
          <!-- 列表 -->
          <div class="fans-list">
            <!-- key必须使用 字符串/数字  item.id是对象（json-bigint转换的） -->
            <!-- :key="item.id.toString() -->
            <div
              class="fans-item"
              v-for="item in fans"
              :key="item.id.toString()"
            >
              <el-avatar :size="80" :src="item.photo"></el-avatar>
              <p>{{ item.name }}</p>
              <el-button type="primary" size="small" plain>+ 关注</el-button>
            </div>
          </div>
          <!-- 分页 -->
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="reqParams.per_page"
            :current-page="reqParams.page"
            @current-change="changePager"
          ></el-pagination>
        </el-tab-pane>
        <el-tab-pane label="粉丝画像" name="img">
          <div ref="bar" style="width:600px;height:400px"></div>
        </el-tab-pane>
      </el-tabs>
      <el-tabs></el-tabs>
    </el-card>
  </div>
</template>

<script>
import echarts from "echarts"
export default {
  name: "page-fans",
  data() {
    return {
      activeName: "img",
      reqParams: {
        page: 1,
        per_page: 24
      },
      //   粉丝列表
      fans: [],
      // 总条数
      total: 0
    };
  },
  created() {
    this.getFans();
  },
  // 这个用函数执行的时候，dom元素才渲染完毕
  mounted() {
    
        this.initBar()
     
  },
  methods: {
    
    // 初始化echarts柱状图
  async initBar() {
    try{  
      // 初始化echarts
     const myChart = echarts.init(this.$refs.bar)
      echarts.init(this.$refs.bar);
      // 定义图标配置
      const option = {
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" 
            // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            // x轴的数据   
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "60%",
            // 刻度对应的数据
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      }
      // 获取数据，给option数据赋值
      const res = await this.$http.get('statistics/followers')
      // console.log(res);
      const obj = res.data.data.age
      const xAxisData = []
      const seriesData = []
      for(const key in obj){
        xAxisData.push(key)
        seriesData.push(obj[key])
      }
      option.xAxis[0].data = xAxisData
      option.series[0].data = seriesData
      // 使用这个配置
      myChart.setOption(option)
  } catch (e) {
       this.$message.error('网路不稳定请刷新一下试试')
     }
    },
    // 分页
    changePager(newPage) {
      this.reqParams.page = newPage;
      this.getFans();
    },
    // 获取粉丝列表
    async getFans() {
      const {
        data: { data }
      } = await this.$http.get("followers", { params: this.reqParams });
      this.fans = data.results;
      this.total = data.total_count;
    }
  }
}
</script>

<style scoped lang="less">
.fans-list {
  .fans-item {
    width: 100px;
    height: 170px;
    border: 1px dashed #ddd;
    display: inline-block;
    margin-right: 40px;
    margin-bottom: 20px;
    text-align: center;
    padding-top: 10px;
    p {
      margin: 10px;
      font-size: 14px;
    }
  }
}
</style>
